<template>
	<view class="container">	
		<nav-bars class="nav_bar navBarApp" bgColor="transparent" fontColor="#fff">
			<view class="nav_center">
				<!-- <view class="followBtn" @click="toFollow(estateInfo.follow_status)"
					:class="{'active':estateInfo.follow_status==1}">{{estateInfo.follow_status==1?"已关注":"关注"}}</view> -->
			</view>
		</nav-bars>			
		<view class="title">
			<!-- <text @tap="toBack" class="iconfont icon-go"></text> -->
			<!-- <text class="iconfont icon-fenxiang"></text> -->
			<view class="title-top">
				<!-- <image :src="indexList.avatar.path" mode=""></image> -->
				<image src="../../../../static/common/avator.png" mode=""></image>
				<view class="name">
					<view class="text">平台管理</view>
					<!-- <view class="redact df-ct" v-if="root.designerSet">
						<text class="txt" @click="toSet">编辑 </text>
						<text class="iconfont icon-jinru"></text>
					</view>
					<view class="redact df-ct" v-else>
						<text class="txt" @click="toViewRoot">我的权限 </text>
						<text class="iconfont icon-jinru"></text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="content">
			<!-- <view class="topNav" v-if="root.designerOrder">
				<view class="item" v-for="(item,index) in topNav" :key="index" @click="to_order(item.status)">
					<view class="itemImg">
						<image :src="item.path" mode=""></image>
					</view>
					{{item.tit}}
				</view>
				<view class="itemlast" @click="toOrder">
					<view class="shadow"></view>
					<view class="item">
						<view class="itemImg">
							<image :src="`${baseImg}/static/adminShop/order.png`" mode=""></image>
						</view>
						订单管理
					</view>
				</view>
			</view> -->
			<!-- 我的钱包 -->
			<!-- <view class="myWallet" v-if="root.designerWallet">
				<view class="item">
					<span>{{Number(priceInfo.settlemented_amount).toFixed(2)}}</span>
					总金额（元）
				</view>
				<view class="item">
					<span>{{Number(priceInfo.cashout_amount).toFixed(2)}}</span>
					可提现（元）
				</view>
				<view class="itemlast">
					<view class="shadow"></view>
					<view class="item" @click="toMyWallet">
						<view class="itemImg">
							<image :src="`${baseImg}/static/adminShop/myPricebag.png`" mode=""></image>
						</view>
						我的钱包
					</view>
				</view>
			</view> -->
			<!-- 菜单 -->
			<view class="menu">
				<h3>店铺管理</h3>
				<view class="menuBox">
					<view class="menu-list" v-for="(item,index) in list" :key="index" @click="handleList(item)" v-if="item.status">
						<view class="menu-num" v-if="item.text == '客服' && noread">NEW</view>
						<image :src="item.url" mode=""></image>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<!-- 用户评论 -->
			<!-- <view class="common">
				<view class="sub-title">
					<text>用户评论</text>
					<image :src="`${baseimg}/static/common/detail.png`" mode=""></image>
				</view>
				<view class="common-content" v-for="(item,index) in indexList.comment_list" :key="index">
					<view class="common-left">
						<image :src="item.user_id.avatar.path" mode=""></image>
						<view class=" left-content">
							<text>{{item.user_id.username}}</text>
							<text>{{item.content}}</text>
							<text>{{item.create_time | dateformat('MM-DD HH:mm')}}</text>
						</view>
					</view>
					<image :src="item.thumb_url.path" mode=""></image>
				</view>
			</view> -->
			<!-- 行内资讯 -->
			<view class="information">
				<view class="sub-title" @click="toInformationList">
					<text>操作手册</text>
					<image :src="`${baseimg}/static/common/detail.png`" mode=""></image>
				</view>
				<view class="list" v-for="(item,index) in indexMsgList" :key="index" @click="toInformationInfo(item.id)">
					<view class="list-left">
						<view class="des">{{item.title}}</view>
						<view class="time">{{$utils.getTimeRelation(item.create_time*1000)}}</view>
					</view>
					<image v-if="item.type==1" :src="item.media[0].path" mode="" class="info-img"></image>
					<image v-if="item.type==2" :src="item.media[0].cover" mode="" class="info-img"></image>
				</view>
			</view>
		</view>
	</view>

	
</template>

<script>
	import Https from '@/service/verification.js';
	import service_distri from '@/service/distri.js'
	import uCharts from '@/pageTwo/components/u-charts/u-charts.min.js';
		var _self;
		var canvaLineA=null;
	export default {
		data() {
			return {
				indexList:{},
				baseImg:this.$static,
				topNav:[{
					tit:'待接单',
					status:1,
					path:this.$static + '/static/adminShop/waitBuy.png'
				},{
					tit:'待处理',
					status:2,
					path:this.$static + '/static/adminShop/waitUp.png'
				},{
					tit:'待付定金',
					status:3,
					path:this.$static + '/static/adminShop/waitColl.png'
				},{
					tit:'待设计',
					status:4,
					path:this.$static + '/static/adminShop/isOK.png'
				}],
				list:[
					// {
					// 	url:this.$static + '/static/adminShop/sendInfo.png',
					// 	text:'发布动态',
					// 	status:true
					// },
					// {
					// 	url:this.$static + '/static/adminShop/dynamic.png',
					// 	text:'动态管理',
					// 	status:true
					// },
					// {
					// 	url:this.$static + '/static/adminShop/caseManage.png',
					// 	text:'案例管理',
					// 	status:true
					// },
					{
						url:this.$static + '/static/adminShop/yuangong.png',
						text:'员工管理',
						status:true
					},
					{
						url:this.$static + '/static/adminShop/changeKeFu.png',
						text:'客服',
						status:true
					},
					// {
					// 	url:this.$static + '/static/adminShop/shopManage.png',
					// 	text:'商品管理',
					// 	status:true
					// },
					{
						url:this.$static + '/static/adminShop/distrStreet.png',
						text:'分销中心',
						status:true
					},
					// {
					// 	url:this.$static + '/static/adminShop/guide.png',
					// 	text:'导购',
					// 	status:true
					// },
					// {
					// 	url:this.$static + '/static/adminShop/bankManage.png',
					// 	text:'银行卡管理',
					// 	status:true
					// },
					{
						url:this.$static + '/static/adminShop/myPc.png',
						text:'我的账号',
						status:true
					},
					// {
					// 	url:this.$static + '/static/adminShop/adminScan.png',
					// 	text:'扫码收款',
					// 	status:true
					// },
					{
						url: this.$static + '/static/adminShop/kefuSet.png',
						text: '客服配置',
						status: false
					},
					{
						url: this.$static + '/static/adminShop/writeoff-icon.png',
						text: '核销',
						status: false
					},
					{
						url: this.$static + '/static/adminShop/writeoff-icon.png',
						text: '分销记录',
						status: false
					},
					{
						url: this.$static + '/static/superHK/superHK1.png',
						text: '超级管家',
						status: uni.getStorageSync('moduleType')==1 || uni.getStorageSync('moduleType')==2?true:false
					},
					{
						url: this.$static + '/static/superHK/superHK2.png',
						text: '精英管家',
						status: uni.getStorageSync('moduleType')==3?true:false
					}
				],
				baseimg:this.$static,
				indexMsgList:[], //行业资讯列表
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				priceInfo:{},
				root:{
					designerOrder:true,//订单
					designerWallet:true, //钱包
					designerSet:false, //设置
					// shopGoodsManage:false,//商品管理
					keFu:false, //客服
					designerCase:false,//案例管理
					staffManage:false,//员工管理
					bankManage:false,//银行卡管理
					dynaRele:false,//动态发布
					dynaManage:false,//动态管理
					myUserPc:false,//账号pc地址
					promoterIndex:false,//创客
					guideIndex:false,//导购
					offlineCollec:false,//扫码收款
					kefuSet:false,//客服配置
					writeOff:false,//扫码核销
					shareRecords:false,//礼包分享记录
				},
				userInfo:{}
			};
		},
		computed:{
			noread(){
				return Object.keys(this.$store.state.tim.noread).length>0?true:false
			}
		},
		created() {
			let router = this.$store.state.index.page?this.$store.state.index.page.ability:[]
			this.root.designerOrder = router.findIndex(item=>item.route == 'designerOrder')!=-1?true:false;
			this.root.designerWallet = router.findIndex(item=>item.route == 'designerWallet')!=-1?true:false;
			this.root.designerSet = router.findIndex(item=>item.route == 'designerSet')!=-1?true:false;
			
			// this.root.shopGoodsManage = router.findIndex(item=>item.route == 'shopGoodsManage')!=-1?true:false;
			this.root.designerCase = router.findIndex(item=>item.route == 'designerCase')!=-1?true:false;
			
			this.root.keFu = router.findIndex(item=>item.route == 'keFu')!=-1?true:false;
			this.root.staffManage = router.findIndex(item=>item.route == 'staffManage')!=-1?true:false;
			this.root.bankManage = router.findIndex(item=>item.route == 'bankManage')!=-1?true:false;
			this.root.dynaRele = router.findIndex(item=>item.route == 'dynaRele')!=-1?true:false;
			this.root.dynaManage = router.findIndex(item=>item.route == 'dynaManage')!=-1?true:false;
			this.root.myUserPc = router.findIndex(item=>item.route == 'myUserPc')!=-1?true:false;
			this.root.promoterIndex = router.findIndex(item=>item.route == 'promoterIndex')!=-1?true:false;
			this.root.guideIndex = router.findIndex(item=>item.route == 'guideIndex')!=-1?true:false;
			this.root.offlineCollec = router.findIndex(item=>item.route == 'offlineCollec')!=-1?true:false;
			this.root.kefuSet = router.findIndex(item => item.route == 'kefuSet') != -1 ? true : false;
			this.root.writeOff = router.findIndex(item => item.route == 'writeOff') != -1 ? true : false;
			this.root.shareRecords = router.findIndex(item => item.route == 'shareRecords') != -1 ? true : false;
			
			console.log(this.root)
			
			this.list.map(item=>{
				switch (item.text) {
					case '发布动态':
						item.status = this.root.dynaRele
						break;
					case '动态管理':
						item.status = this.root.dynaManage
						break;
					case '案例管理':
						item.status = this.root.designerCase
						break;
					case '员工管理':
						item.status = this.root.staffManage
						break;
					case '客服':
						item.status = this.root.keFu
						break;
					// case '商品管理':
					// 	item.status = this.root.shopGoodsManage
					// 	break;
					case '分销中心':
						item.status = this.root.promoterIndex
						break;
					case '导购':
						item.status = this.root.guideIndex
						break;
					case '银行卡管理':
						item.status = this.root.bankManage
						break;
					case '我的账号':
						item.status = this.root.myUserPc
						break;
					case '扫码收款':
						item.status = this.root.offlineCollec
						break;
					case '客服配置':
						item.status = this.root.kefuSet;
						break;	
					case '核销':
						item.status = this.root.writeOff;
						break;	
					case '分销记录':
						item.status = this.root.shareRecords;
						break;
				}
			})
			
			console.log(this.list,'管理模块')
			this.getUserInfo()
			// this.getIndexInfo()
			// uni.$on('changeInfo',item=>{
			// 	this.getIndexInfo()
			// })
			
			
			_self = this;
			this.cWidth=uni.upx2px(680);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
			this.getPriceInfo();
			this.getIndexMsg();
			this.getLiveConfig()
		},
		// onBackPress() {
		// 	console.log('返回返回')
		// 	uni.switchTab({
		// 		url:'/pages/mall/index/index'
		// 	})
		// },
		onUnload() {
			// 移除监听事件
			uni.$off('changeInfo')
		},
		methods:{
			toBack() {
				if (typeof this.customBack === 'function') {
					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
					this.customBack.bind(this.$u.$parent.call(this))()
				} else {
					// uni.navigateBack()
					// uni.navigateBack({
					// 	delta:1
					// })
					uni.switchTab({
						url:'/pages/mall/index/index'
					})
				}
			},
			// 获取创客信息（每个用户的个人信息）
			getUserInfo(){
				let user_id = this.$store.state.index.userId
				service_distri.get_DistriInfo({user_id}).then(res=>{
					console.log(res,'用户个人信息')
					if(res.code==1){
						this.userInfo = res.data?res.data:{}
					}
				})
			},
			// 编辑按钮
			toSet(){
				this.$emit('changeSet','set')
			},
			// 我的权限
			toViewRoot(){
				let user_id = this.$store.state.index.userId
				uni.navigateTo({
					url:`/pagesFour/home/shopStaff/viewRoot?staff_user_id=${user_id}&name=${this.userInfo.username}&headImg=${this.indexList.avatar.path}`
				})
			},
			// 获取钱包信息
			getPriceInfo(){
				this.$api.getPriceInfo().then(res=>{
					console.log(res,'钱包信息')
					if(res.code==1){
						this.priceInfo = res.data?res.data:{}
					}
				})
			},
			// 跳转到我的钱包
			toMyWallet(){
				this.$emit('changeWallet','financial')
			},
			// 获取行业资讯
			getIndexMsg(){
				let user_id = this.$store.state.index.userId
				this.$api.getIndexMsg({user_id}).then(res=>{
					console.log(res,'行业资讯')
					if(res.code==1){
						this.indexMsgList = res.data?res.data:[]
					}
				})
			},
			// 跳转到行业资讯列表
			toInformationList(){
				uni.navigateTo({
					url:'/pagesFour/home/information/informationList'
				})
			},
			
			// 点击进入资讯详情
			toInformationInfo(id){
				uni.navigateTo({
					url:'/pagesFour/home/information/informationInfo?information_id='+id
				})
			},
			
			// 首页数据
			// getIndexInfo(){
			// 	let sid = this.$store.state.index.sid
			// 	let params = {
			// 		designer_id:sid
			// 	}
				
			// 	this.$api.design_index(params).then(res=>{
			// 		console.log(res,"主页数据")
			// 		if(res.code==1){
			// 			if(!res.data.avatar.path){
			// 				this.$refs.uToast.show({
			// 					title: '请设置基本资料',
			// 					type: 'warning',
			// 					duration:3000,
			// 					// url: '/pages/user/index'
			// 				})
			// 			}
			// 			this.indexList = res.data
						
			// 		}
			// 	})
			// },
			// 单个进入订单管理
			to_order(sta){
				uni.navigateTo({
					url:'../home/order/index?status='+sta
				})
			},
			// 进入订单管理
			toOrder(){
				uni.navigateTo({
					url:'../home/order/index'
				})
			},
			handleList(e){
				console.log(e,'xiabiao')
				switch (e.text) {
					case '发布动态':
						this.$emit('openRele',true)
						break;
					case '动态管理':
						uni.navigateTo({
									    url: '/pagesFour/home/dynamicManage/dynamicList'
									});
						break;
					case '案例管理':
						uni.navigateTo({
									    url: '/pageTwo/home/case/index'
									});
						break;
					case '员工管理':
						uni.navigateTo({
									    url: '/pagesFour/home/shopStaff/staffList'
									});
						break;
					case '客服':
						uni.navigateTo({
							url: '/pages_customer/pages/list'
						});
						break;
					case '商品管理':
						uni.navigateTo({
									    url: '/pagesFour/home/shopManage/index'
									});
						break;
					case '分销中心':
						// let token = this.$store.state.index.token
						// if(token){
						// 	if(uni.getUserProfile){
						// 		uni.getUserProfile({
						// 			desc:'Wexin',     // 这个参数是必须的
						// 			success:res=>{
						// 				console.log(res)
						// 				if(res.errMsg == 'getUserProfile:ok'){
						// 					uni.setStorageSync('userInfo',res.userInfo)
											uni.navigateTo({
												url:'/pagesOne/distri/index/index'
											})
						// 				}
						// 			},
						// 			fail:err=>{
						// 				console.log(err)
						// 			}
						// 		})
						// 	}
						// }
						break;
					case '导购':
						uni.showModal({
							content:'请选择产品生成导购清单',
							success:res=> {
								if(res.confirm){
									uni.switchTab({
										url:'/pages/mall/index/index'
									});
								}
							}
						})
						break;
					case '银行卡管理':
						// uni.navigateTo({
						// 			   url:'/pagesOne/distri/bindBankCard/cardManage?level=0'
						// 			});
						this.getAccountInfo()
						break;
					case '我的账号':
						uni.navigateTo({
									   url:'/pages/my/index/index'
									});
						break;
					case '扫码收款':
					console.log('11111')
						uni.scanCode({
						    success: function (res) {
								console.log(res,'二维码')
						        console.log('条码类型：' + res.scanType);
						        console.log('条码内容：' + res.result);
								console.log('路径',res.path);
								if(!res.path && res.result){
									uni.navigateTo({
										url:'/pages_admin/home/collection/collection?verificationCode='+res.result
									})
								}else{
									uni.showToast({
										title:'无效二维码',
										icon:'none'
									})
								}
						    },
							fail(res) {
								console.log(res,'扫码失败')
							},
						});
						break;
					case '客服配置': 
						uni.navigateTo({
									   // url:'/pages_customer/pages/customSet/configUser',
									   url:'/pages_now/pages/service/nowservice'
									});
						break;	
					case '核销':
						uni.navigateTo({
							url: '/pagesFour/activity/writeOff/index'
						});
						break;	
					case '分销记录':
						uni.navigateTo({
							url: '/pagesFour/activity/shareList/index'
						});
						break;	
					case '超级管家':
					case '精英管家':
						uni.navigateTo({
							url: `/pages_superHK/pages/superHK/index?headImg=${this.userInfo.headimg}`
						});
						break;
				}
			},
			
			// 获取直播配置
			getLiveConfig(){
				service_distri.getLiveConfig().then(res=>{
					console.log(res,'获取直播配置')
					if(res.code==1){
						if(res.data.value==0){
							let listIndex = this.list.findIndex(item=>item.text=='分销中心')
							this.list[listIndex].status = false
							// console.log(listIndex,this.list,'////////---')
						}
					}
				})
			},
			
			// 查询云商通账户信息
			getAccountInfo() {
				var that = this;
				let params = {};
				// let identityType = uni.getStorageSync('identityType'); //1企业,2个人
				// let isMaster = uni.getStorageSync('isMaster'); //1老板,0员工
				// console.log(identityType);
				Https.GetAccountMes(params).then(res => {
					if (res.code == 1) {
						console.log(res.data);
						var data = res.data;
						if (data.is_realname == 0) {
							uni.showModal({
								title: '提示',
								content: '暂时还没实名验证,是否实名验证?',
								confirmText: '确定',
								success: function(res) {
									if (res.confirm) {
										// 会员类型(2企业会员,3个人会员)
										if (data.member_type == 2) {
											console.log(123);
											uni.navigateTo({
												url: '/pages_Verification/verification/select/certificate'
											});
											return;
										}
										if (data.member_type == 3) {
											console.log(456);
											uni.navigateTo({
												url: '/pages_Verification/verification/personal/personal'
											});
											return;
										}
									}
								}
							});
							return;
						}
						if (data.is_realname == 1) {
							if (data.is_phone == 0) {
								uni.showModal({
									title: '提示',
									content: '暂时还没绑定手机号,是否绑定?',
									confirmText: '确定',
									success: function(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: '/pages_Verification/verification/bindPhone/BindPhone'
											});
										}
									}
								});
							} else if (data.is_sign == 0) {
								uni.showModal({
									title: '提示',
									content: '需要完善支付信息,是否继续?',
									confirmText: '确定',
									success: function(res) {
										if (res.confirm) {
											uni.navigateToMiniProgram({
												appId: 'wxc46c6d2eed27ca0a', //通商云平台账户小程序appId
												path: 'pages/merchantAddress/merchantAddress',
												extraData: {
													// 测试环境地址：url=https://test.allinpay.com/yungateway/member/signContract.html?
													// 生产环境地址：url=https://fintech.allinpay.com/yungateway/member/signContract.html?
													// targetUrl: 'https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param //商户拼接的请求报文
													targetUrl: data.signContract
												},
												envVersion: 'release', //develop 开发版  trial 体验版  release 正式版
												success(res) {
													// 打开成功
													console.log(res);
												}
											});
										}
									}
								});
								// let url = encodeURIComponent('https://test.allinpay.com/yungateway/member/signContract.html?' + data.signContract.data.param);
								// uni.navigateTo({
								// 	url: '/pagesOne/verification/webview?url=' + url
								// });
							} else if (data.is_phone == 1 && data.is_sign == 1) {
								if (data.member_type == 3) {
									// 个人
									uni.navigateTo({
										url: '/pages_Verification/verification/bankCard/bankCardList?memberType=3&level=0'
									});
								} else if (data.member_type == 2) {
									// 企业
									uni.navigateTo({
										url: '/pages_Verification/verification/bankCard/bankCardList?memberType=2&level=0'
									});
								}
								// uni.navigateTo({
								// 	url:`/pagesOne/distri/withdCom/withdCom?level=${0}&allCanPrice=${this.priceInfo.cashout_amount}`
								// })
							}
							return;
						}
						if (data.is_realname == 2) {
							if (data.member_type == 3) {
								// 个人
								uni.navigateTo({
									url: '/pages_Verification/verification/status/status?isPersonal=true&status=0&isIndex=true'
								});
							} else if (data.member_type == 2) {
								// 企业
								uni.navigateTo({
									url: '/pages_Verification/verification/status/status?isPersonal=false&status=0&isIndex=true'
								});
							}
							return;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//echart
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						// console.log(res.data.data)
						let LineA={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories=res.data.data.LineA.categories;
						LineA.series=res.data.data.LineA.series;
						_self.showLineA("canvasLineA",LineA);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:10,
						max:180,
						format:(val)=>{return val.toFixed(0)+'元'}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				// console.log(e,55555)
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.qiun-charts {
			width: 680upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
		
		.charts {
			width: 680upx;
			height: 500upx;
			background-color: #FFFFFF;
		}
	.container{
		// position: relative;
		width: 750rpx;
		background: url(https://manager.ryz1620.com/static/home-personal/personal-bg.png) no-repeat top;
		background-size: 100% 538rpx;
		
	.title{
		width: 750rpx;
		height: 390rpx;
		border-radius: 0 0 2em 2em;		
		color: #fff;
		padding: 50rpx 66rpx 146rpx 24rpx;
		.icon-fenxiang{
			width: 34rpx;
			height: 34rpx;
			position: relative;
			left: 28rpx;
			top: -62rpx;
		}
		.icon-go{
			width: 34rpx;
			height: 34rpx;
			position: relative;
			left: 10rpx;
			top: -62rpx;
		}
		.title-top{
			display: flex;
			width: 100%;
			height: 112rpx;
			image{
				width: 112rpx;
				height: 112rpx;
				background: rgba(0, 0, 0, 0);
				box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				opacity: 1;
				margin-right: 36rpx;
			}
			.name{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.text{
					// margin-bottom: 16rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					opacity: 1;
				}
				.redact{
					max-width: 180rpx;
					height: 48rpx;
					background: rgba(255,255,255,0.1);
					border-radius: 24rpx;
					// align-items: center;
					text-align: center;
					line-height: 48rpx;
					align-items: center;
					.txt{
						// width: 52rpx;						
						// height: 40rpx;
						font-size: 26rpx;
						font-weight: 400;						
						// text-align: center;
						color: #FFFFFF;						
					}
					.icon-jinru{
						font-size: 20rpx;
					}
				}
			}
		}
		.title-content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 76rpx 60rpx 146rpx 36rpx;
			view{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				&:first-child{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 32rpx;
					color: #FFFFFF;
				}
				text{
					&:last-child{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 22rpx;
						color: #A0A0A0;
						margin-top: 18rpx;
					}
				}
			}
		}
	}
	.content{
		margin-top: -150rpx;
		padding: 0 24rpx 80rpx 24rpx;
		.topNav{
			width: 702rpx;
			height: 198rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			padding: 50rpx 28rpx;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font: 400 24rpx/44rpx PingFang SC;
				color: #333;
				.itemImg{
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.itemlast{
				display: flex;
				.shadow{
					margin-right:28rpx;
					width: 4rpx;
					height: 100rpx;
					background-color: #fff;
					box-shadow: -8rpx 0px 12rpx rgba(0, 0, 0, 0.16);
				}
			}
		}
		// 我的钱包
		.myWallet{
			width: 702rpx;
			height: 180rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin: 24rpx 0;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 28rpx;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				font: 400 24rpx/44rpx PingFang SC;
				color: #939393;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				span{font: 600 36rpx/50rpx PingFang SC;color: #333;}
			}
			.itemlast{
				display: flex;
				.shadow{
					margin-right:28rpx;
					width: 4rpx;
					height: 100rpx;
					background-color: #fff;
					box-shadow: -8rpx 0px 12rpx rgba(0, 0, 0, 0.16);
				}
				.itemImg{
					// margin-bottom: 16rpx;
				}
			}
		}
		.menu{
			width: 702rpx;
			background: #FEFFFE;
			opacity: 1;
			border-radius: 16rpx;
			// justify-content: space-between;					
			margin-bottom: 16rpx;	
			h3{
				padding: 40rpx 0 28rpx 28rpx;
				width: 100%;
				height: 110rpx;
				font: 500 30rpx/30rpx PingFang SC;
				color: #0A0605;
				border-bottom: 2rpx solid #F8F8F8;
			}	
			.menuBox{
				padding: 40rpx 0rpx 0;
				// display: flex;
				// justify-content: space-between;
				// flex-wrap: wrap;
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: .5rem;
				.menu-list{
					margin: 0 0 40rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					font: 400 24rpx/24rpx PingFang SC;
					color: #333;
					position: relative;
					image{
						width: 76rpx;
						height: 76rpx;
						margin-bottom: 16rpx;
					}
					.menu-num{
						position: absolute;
						right: 10rpx;
						top: -10rpx;
						display: inline-block;
						background: #fa3534;
						border-radius: 8rpx;
						z-index: 99;
						color: #fff;
						font-size: 18rpx;
						padding: 5rpx;
					}
				}
			}
		}
		.sub-title{
			display: flex;
			justify-content: space-between;
			text{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 32rpx;
				color: #0A0605;
			}
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
		.data-sheet{
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			.sub-title {
				padding: 32rpx 24rpx 0rpx 28rpx;
			}
			.line-box {
				width: 100%;
				height: 350upx;
				
				position: relative;
				.uni-ec-canvas {
				  width: 100%;
				  height: 350upx;
				  display: block;
				  
				  position: absolute;
				  left: 0;
				  top: 0;
				}
			}
			
		}
		.common{
			width: 702rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 32rpx 24rpx 28rpx 28rpx;
			.common-content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				.common-left{
					image{
						width: 76rpx;
						height: 76rpx;
						margin-right: 24rpx;
					}
					display: flex;
					.left-content{
						display: flex;
						flex-direction: column;
						width: 70%;
						text{
							&:nth-child(1){
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								line-height: 40rpx;
								color: #DBA954;
							}
							&:nth-child(2){
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								color: #505050;
							}
							&:nth-child(3){
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								color: #A0A0A0;
							}
						}
					}
				}
				image{
					width: 116rpx;
					height: 116rpx;
				}
				&:last-child{
					border-bottom:0
				}
			}
		}
		.information{
			width: 702rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			padding: 32rpx 24rpx 28rpx 28rpx;
			.list{
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #F5F5F5;
				padding: 24rpx 0;
				&:last-child{
					border-bottom:0
				}
				.list-left{
					
					.des {
						width: 356rpx;
						height:128rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height:44rpx;
						color: #0A0605;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
					}
					.time {
						padding-top: 28rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 300;
						line-height: 24rpx;
					}
				}
				.info-img{
					width: 250rpx;
					height: 190rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
	}
</style>